<template>
  <!-- 档案上架 -->
  <div class="container">
    <!-- 档案的搜索框 -->
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'box'">
      <el-form :inline="true" :model="boxQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="盒号/盒名">
          <el-input v-model="boxQueryParam.boxNoOrName" placeholder="请输入盒号或盒名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="boxOnSubmit">查询</el-button>
          <el-button @click="boxRest">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd('box')">添加到上架列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 盒的搜索框 -->
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <el-form :inline="true" :model="archiveQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="档号/题名">
          <el-input v-model="archiveQueryParam.archiveNoOrName" placeholder="请输入档号或题名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="archiveOnSubmit">查询</el-button>
          <el-button @click="archiveRest">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd('archive')">添加到上架列表</el-button>
        </el-form-item>
      </el-form>
      <!-- </el-col> -->
      <el-row :gutter="24">
        <el-col :span="24"> </el-col>
      </el-row>
    </el-card>
    <el-tabs v-model="activeName" tab-position="left" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="盒上架" name="box">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="boxTableData" border style="width: 100%" height="58vh" @selection-change="boxSelectionChange"
            ref="boxtable">
            <el-table-column type="selection" width="55" align="center" sortable> </el-table-column>
            <el-table-column v-for="item of boxTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width">
              <template #default="scope">
                <span v-if="item.prop === 'boxNo'">
                  <el-link v-if="scope.row.boxNo" type="primary" :underline="false" style="font-size: 12px"
                    @click="archivesByBoxNo(scope.row)">
                    {{ scope.row[item.prop] }}
                  </el-link>
                  <span v-else>无</span>
                </span>
                <span v-else-if="item.prop === 'stageStatus'">
                  <el-tag v-if="scope.row.stageStatus == 0">未上架</el-tag>
                  <el-tag v-if="scope.row.stageStatus == 1" type="success">已上架</el-tag>
                  <el-tag v-if="scope.row.stageStatus == 2" type="danger">已下架</el-tag>
                </span>
                <span v-else-if="item.prop === 'storeStatus'">
                  <el-tag :type="statusInfo(scope.row).type">
                    {{ statusInfo(scope.row).text }}
                  </el-tag>
                </span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button link size="mini" icon="el-icon-edit" @click="handleEditBox(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="档案上架" name="archive">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="archiveTableData" border style="width: 100%" height="58vh" ref="archivetable"
            @selection-change="archiveSelectionChange">
            <el-table-column type="selection" width="55" align="center" sortable> </el-table-column>
            <el-table-column v-for="item of archiveTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width">
              <template #default="scope">
                <span v-if="item.prop === 'stageStatus'">
                  <el-tag v-if="scope.row.stageStatus == 0">未上架</el-tag>
                  <el-tag v-if="scope.row.stageStatus == 1" type="success">已上架</el-tag>
                  <el-tag v-if="scope.row.stageStatus == 2" type="danger">已下架</el-tag>
                </span>
                <span v-else-if="item.prop === 'storeStatus'">
                  <el-tag :type="statusInfo(scope.row).type">
                    {{ statusInfo(scope.row).text }}
                  </el-tag>
                </span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button link size="mini" icon="el-icon-edit" @click="handleEditArchive(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'box'">
      <pagination ref="boxpagination" :totalCount="boxTotalCount" @pagination="boxPagination"></pagination>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'archive'">
      <pagination ref="archivepagination" :totalCount="archiveTotalCount" @pagination="archivePagination"></pagination>
    </el-card>
    <up-shelves-dialog ref="upShelvesDialog" @ok="loadData"></up-shelves-dialog>
    <archives-by-box-no ref="archivesByBoxNo"></archives-by-box-no>
    <new-archives-dialog ref="newArchivesDialog" @ok="archiveLoadData"></new-archives-dialog>
    <newBoxDialog ref="newBoxDialog" @ok="boxLoadData"></newBoxDialog>
  </div>
</template>

<script>
import { upBoxPage, upArchivesPage } from '@/api/rfid/label'
import upShelvesDialog from './dialog/upShelvesDialog.vue'
import archivesByBoxNo from './dialog/archivesByBoxNo.vue'
import newArchivesDialog from './dialog/newArchivesDialog.vue'
import newBoxDialog from './dialog/newBoxDialog.vue'

export default {
  name: 'upShelves',
  components: { upShelvesDialog, archivesByBoxNo, newArchivesDialog, newBoxDialog },
  data() {
    return {
      activeName: 'box',
      boxTotalCount: 0,
      //查询条件
      boxSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      boxQueryParam: {},
      boxTableData: [],
      boxTableProps: [
        { title: '盒号', prop: 'boxNo', width: '', checked: true },
        { title: '盒名', prop: 'boxName', width: '', checked: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true },
        { title: '盒宽(CM)', prop: 'boxWidth', width: '', checked: true },
        { title: '上架状态', prop: 'stageStatus', width: '', checked: true },
        { title: '在库状态', prop: 'storeStatus', width: '', checked: true },
      ],
      boxSelectionData: [],
      // ============
      archiveTotalCount: 0,
      //查询条件
      archiveSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      archiveQueryParam: {},
      archiveTableData: [],
      archiveTableProps: [
        { title: '档号', prop: 'archiveNo', width: '', checked: true },
        { title: '题名', prop: 'archiveName', width: '', checked: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true },
        { title: '页数', prop: 'pageNo', width: '', checked: true },
        { title: '上架状态', prop: 'stageStatus', width: '', checked: true },
        { title: '在库状态', prop: 'storeStatus', width: '', checked: true },
      ],
      archiveSelectionData: [],
    }
  },
  // mounted() {
  //   this.boxLoadData()
  //   this.archiveLoadData()
  // },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // activeName修改
      vm.activeName = to.params.activeName ? to.params.activeName : 'box'
      vm.boxLoadData()
      vm.archiveLoadData()
      if (to.params.activeName === 'archive') {
        vm.upShelves(to.params.selectionData, 'archive')
      } else if (to.params.activeName === 'box') {
        vm.upShelves(to.params.selectionData, 'box')
      }
    })
  },
  computed: {
    // activeName() {
    //   return this.$route.params.activeName ? this.$route.params.activeName : 'box'
    // },
  },
  methods: {
    statusInfo(row) {
      if (row.storeStatus === 0) return { type: '', text: '未入库' }
      if (row.storeStatus === 1) {
        return row.stageStatus === 1
          ? { type: 'success', text: '在库' }
          : { type: 'warning', text: '暂存' }
      }
      if (row.storeStatus === 2) return { type: 'danger', text: '离库' }
      return { type: '', text: '' }
    },
    handleClick(tab, event) {
      if (tab.name === 'archive') {
        this.archiveTableData = []
        this.archiveLoadData()
      } else if (tab.name === 'box') {
        this.boxTableData = []
        this.boxLoadData()
      }
    },
    handleAdd(type) {
      if (type === 'box') {
        if (this.boxSelectionData.length === 0) {
          this.$message.warning('请选择要上架的档案盒')
          return
        }
        // this.$refs.upShelvesDialog.add(this.boxSelectionData, 'box')
        this.upShelves(this.boxSelectionData, 'box')
      } else if (type === 'archive') {
        if (this.archiveSelectionData.length === 0) {
          this.$message.warning('请选择要上架的档案')
          return
        }
        // this.$refs.upShelvesDialog.add(this.archiveSelectionData, 'archive')
        this.upShelves(this.archiveSelectionData, 'archive')
      }
    },
    upShelves(data, type) {
      this.$refs.upShelvesDialog.add(data, type)
    },
    loadData(type) {
      if (type === 'box') {
        this.boxLoadData()
      } else if (type === 'archive') {
        this.archiveLoadData()
      }
    },
    // ===================================档案盒===================================
    handleEditBox(row) {
      this.$refs.newBoxDialog.edit(row)
    },
    boxOnSubmit() {
      this.$refs.boxpagination.resetPagination()
    },
    boxRest() {
      this.boxQueryParam = {}
      this.$refs.boxpagination.resetPagination()
    },
    boxLoadData() {
      var param = Object.assign(this.boxQueryParam, this.boxSearchModel)
      upBoxPage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.boxTableData = res.data.data.records
            this.boxTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    boxPagination(val) {
      this.boxSearchModel.pageNo = val.page
      this.boxSearchModel.pageSize = val.limit
      this.boxLoadData()
    },
    boxSelectionChange(val) {
      this.boxSelectionData = val
    },
    archivesByBoxNo(row) {
      this.$refs.archivesByBoxNo.init(row)
    },
    // ===================================档案===================================
    handleEditArchive(row) {
      this.$refs.newArchivesDialog.edit(row)
    },
    archiveOnSubmit() {
      this.$refs.archivepagination.resetPagination()
    },
    archiveRest() {
      this.archiveQueryParam = {}
      this.$refs.archivepagination.resetPagination()
    },
    archiveLoadData() {
      var param = Object.assign(this.archiveQueryParam, this.archiveSearchModel)
      upArchivesPage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.archiveTableData = res.data.data.records
            this.archiveTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    archivePagination(val) {
      this.archiveSearchModel.pageNo = val.page
      this.archiveSearchModel.pageSize = val.limit
      this.archiveLoadData()
    },
    archiveSelectionChange(val) {
      this.archiveSelectionData = val
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/style/tabs.less';

.demo-form-inline {
  .el-form-item {
    margin-bottom: 0;
  }
}

.el-tabs__item {
  height: 50%;
}

.el-tabs__header {
  height: 63vh !important;
}
</style>
